<!-- 
  @author : andy
  @description : 图标按钮组件
-->
<template>
  <button class="icon-button" @click="onClick">
    <slot />
  </button>
</template>

<script lang='ts' setup>
const emits = defineEmits(['click']);
const onClick = () => {
  emits('click');
}
</script>
<style lang='less' scoped>
.icon-button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: var(--font-size-medium);
  border-radius: var(--radius);
  transition: all 0.3s;
  .useTheme({
    color: text-color;
  });
  .useTheme({
    background-color: text-color-helpful;
  } , 0.4);
  .useHover({
    color: primary-color;
  });
  .useHover({
    background-color: primary-color;
  } , 0.2);
}
</style>